<template>
    <div class="enterprise">
      <el-card class="top">
        <el-form :model="form"  inline >
          <el-form-item label="企业编号" >
            <el-input v-model.trim="form.eid"/>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input v-model.trim="form.name"/>
          </el-form-item>
          <el-form-item label="创建者">
            <el-input v-model.trim="form.username"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-select  v-model="form.status"  placeholder="请选择活动区域">
              <el-option v-for="item in employeesData.status" :key="item.id"  :value="item.id" :label="item.value" />
            </el-select>
          </el-form-item>
          <div class="btn" >
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="addEvent">+新增企业</el-button>
          </el-form-item>
        </div>
        </el-form>
      </el-card>
      <el-card>
        <template >
          <el-table :data="list">
            <el-table-column
            type="index"   
            prop="id"
              label="序号"
              width="100px"
            />
            <el-table-column
            prop="eid"
              label="企业编号"
            />
            <el-table-column
            prop="name"
              label="企业名称"
            />
            <el-table-column
            prop="username"
              label="创建者"
            />
            <el-table-column
            prop="status"
            :formatter="changement"
              label="状态"
            >
            <template v-slot="{row}">
              <div :class="{textColor:row.status===0}">
                {{row.status===0?'禁用':'启用'}}
              </div>
            </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="350px"
            >
              <template v-slot="{row}">   
                <el-button type="text" @click="editEvent(row)">编辑</el-button>
                <el-button type="text" @click="statusEvent(row)">禁用</el-button>
                <el-button type="text" @click="delEvent(row.id)">删除</el-button>
              
              </template>
            </el-table-column>
  
          </el-table>
        </template>
        <!-- 分页 -->
        <div class="block">
          <el-pagination   
            :page-sizes="[1,5, 10, 20, 30]"
            :current-page.sync="form.page"
            :page-size.sync="form.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="getData"
            @current-change="getData"
          />
        </div>
      </el-card>
       <!-- 弹框 -->
    <Add ref="add" @getData="getData"></Add>
    </div>
  </template>
  
  <script>
  import { enterpriseList,enterpriseRemove,enterpriseStatus} from '@/api/EnterPrise'

  import Add from './components/add.vue'
  // 导入举数据转换
import  employeesData from '@/api/constant/employess'
// import { enterpriseList } from '@/api/EnterPrise'
export default {
  name: 'EnterPriseIndex',
  components: {
     Add 
  },
    data() {
      return {
        total:5,
        list: [{}],
        employeesData:employeesData,
        form:{
          page:1,//	否	string	页码 默认为1
          limit:10,	//否	string	页尺寸 默认为10
          eid:'',
          name:'',
          username:'',
          status:''

        },
      }
    },
    created(){
    this.getData()
    },
    methods:{
      async getData(){
        const res=await enterpriseList(this.form)
        console.log('获取企业列表',res);
        this.list=res.data.items
        this.total=res.data.pagination.total
      
      },
      // 状态数据转换
      changement(row, column, cellValue, index){
        // cellValue:单元格数据
       const findiItem= employeesData.status.find(
      (item)=>+item.id===cellValue
     )
     return findiItem ? findiItem.value : '-'
      },
      // 新增
      addEvent(){
        this.$refs.add.isShow=true
        this.$refs.add.mode='add' 
      },
      // 编辑
      async editEvent(row){
        this.$refs.add.isShow=true
        this.$refs.add.mode='edit'
        // 数据回显
        this.$refs.add.form=JSON.parse(JSON.stringify(row))
      },
      // 删除
      delEvent(id){
   this.$confirm('您确定删除该项？')
   .then(async()=>{
    await enterpriseRemove({id:id})
    // 刷新列表数据
    // 如果删除的数据页码>1 且当前页只有一条数据时，页码要往前一页
    // 提示
   if(this.form.page>1&& this.list.length<=1){
    this.form.page--
   }
    this.getData()
    this.$message.success('删除成功')
   })
      },
      // 状态
      async statusEvent(row){
      const res=await enterpriseStatus({
        id:row.id
      })
      this.$message.success('设置状态成功')
      this.getData()
      },
      // 清除
      clear(){
        this.form={
          eid:'',
          name:'',
          username:'',
          status:''
        }
      },
      // 搜索
     async search(){
      this.getData()
      }

   
    }
  
}
</script>

<style lang="scss" scoped>
.el-main[data-v-13877386]{
  text-align: left
}
.enterprise {
  background-color: #ccc;
  height: 900px;

  .top {
    display: flex;
    padding-top: 9px;
    background-color: #fff;

  }
  .textColor{
  color:red
}
.btn{
  width: 278px;
  // display: inline-block;
}
}
.block {
  text-align: center;
}
</style>
